[#ftl]
[@define "agile.MultiSelectEditorX" "_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin"]
//summary:advanced multi-select editor which can add/delete/edit the options through the option editor, the options will be freshed to the valueOptions(dijit/form/MultiSelect) widget
//example:
//	<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector">	 	 
// 	 <div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"xxx",htmlName:"xx",fireOnChange:false'></div>
// 	 <div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"yyy",htmlName:"yy",fireOnChange:false'></div>
//	</div>
//	there are two editors defined at the example, it means 
//	1) each option is composed by the value of these two editors 
//	2) when an option is selected in the valueOptions(dijit/form/MultiSelect) widget, it will be decomposed and displayed in these editors  
//
 [#assign templateString]
 	<table style="height:100%;width:100%">
	<tr><td colspan="3"><div data-dojo-attach-point="containerNode"></div></td></tr>
	<tr>	
		<td></td>
		<td width="20px"><img class='agileButton agileButtonAdd' data-dojo-attach-point="addButton"></img></td>
		<td width="20px"><img class='agileButton agileButtonRemove' data-dojo-attach-point="removeButton"></img></td>
	</tr>
	<tr>
		<td colspan="3">
			<select data-dojo-type="dijit/form/MultiSelect" data-dojo-attach-point="valueOptions" data-dojo-props='multiple:false,readOnly:true,style:"width:100%;height:50px"'></select>
		</td>
	</tr>	
	</table>
 [/#assign] 
 templateString:"${templateString?js_string}",options:"",title:"",widgetsInTemplate:true,valueDelimeter:","
 ,constructor:function(){
	 aspect.after(this,"startup",lang.hitch(this,function(){
		 if(!this._initMultiSelectEditorX){
			 this.init();
			 this._initMultiSelectEditorX = true;
		 }
	 }));
 }
  ,init:function(){
	  //TODO:stop backspace key event 
		agile.stopKeyEvent(this.valueOptions);
			
		this.own(on(this.addButton,"click",lang.hitch(this,"addOption")));				
		this.own(on(this.removeButton,"click",lang.hitch(this,"removeOption")));
		
		aspect.after(this.valueOptions,"onChange",lang.hitch(this,function(values){
//			console.log("@@@@values",values.length,values);
			if(values.length > 0){
				this.containedEditor.stringToValue(values[0]);
			}
		}),true);
		aspect.after(this.valueOptions,"removeOptions",lang.hitch(this,function(options){
			this.containedEditor.onOptionRemoved(options);
		}),true);
//		aspect.after(this.valueOptions,"addOption",lang.hitch(this,function(option){
//			this.containedEditor.onOptionAdded(option);
//		}),true);	
		aspect.after(this.valueOptions,"replaceOptions",lang.hitch(this,function(options){
			this.containedEditor.onOptionUpdated(options);
		}),true);		
	}
  ,addOption:function(){
	  //summary: add a new option or update an existing option
	  
	  	//validate the option
		if(this.containedEditor.processBeforeAdd()){
			var keyValue = this.containedEditor.valueToString();
//			console.log("keyValue",keyValue)
			if(keyValue){
				//this.updateOption(keyValue);
				var exist = false,key = keyValue[0],value = keyValue[1],label = keyValue[2]?keyValue[2]:keyValue[1], newOptions = [];
				this.valueOptions.replaceOptions([{key:key,label:label,value:value}]);
				
				//this.containedEditor.onValueChange(this.get("value"));
			}
		}
	}
//  	,updateOption:function(keyValue){
//		var exist = false,key = keyValue[0],value = keyValue[1],label = keyValue[2]?keyValue[2]:keyValue[1], newOptions = [];
//		if(key){
//			var options = this.valueOptions.getOptions();
//			//console.log("options",options)
//			for(var i = 0; i < options.length; i++){
//				if(options[i].value.indexOf(key) != -1){
//					exist = true;
//					//update for existing option
//					if(options[i].value != value){
//						this.valueOptions.removeOption(options[i]);
//						//this.valueOptions.addOption([{label:keyValue[1],value:keyValue[1]}],i);
//						this.valueOptions.addOption([{label:label,value:value}],i);
//						//updateOption
//						//this.containedEditor.onValueChange(this.get("value"));
//					}								
//					break;
//				}
//			}
//		}					
//		
//		if(!exist){
//			//this.valueOptions.addOption([{label:keyValue[1],value:keyValue[1]}]);
//			this.valueOptions.addOption([{label:label,value:value}]);
//			//this.containedEditor.onValueChange(this.get("value"));
//		}	
//		return newOptions;
//  	}
  	,removeOption:function(){
  		var optionItems = this.valueOptions.getSelected(),options = [];
		for(var i = 0; i < optionItems.length; i++){
			options.push({value:optionItems[i].value});
		}
		this.valueOptions.removeOptions(options);
//		this.containedEditor.onOptionRemoved(options);
		
		
//		this.containedEditor.onValueChange(this.get("value"));
//		//clear the editor value
//		this.containedEditor.clearValue();
//		
  	}
 	,get:function(name){
		if(name == "value"){
			//get all options from the selector and format them to text
			return this.valueOptions.getValues(this.valueDelimeter);	
//			return this.valueOptions.getLables(this.valueDelimeter);
		}
		return this.inherited(arguments);
	}
 	,set:function(name,value){
		if(name == "value"){
//			console.info(this.name,this.htmlName,"$$$MultiSelectEditorX######value:",value);
			this.valueOptions.clearOptions();
			this.valueOptions.setValues(value,this.valueDelimeter);
			var option = this.valueOptions.getOptions()[0];
			this.containedEditor.stringToValue(option?option.value:"");
		}else if(name == "disabled" || name == "readOnly"){
			this.valueOptions.set(name,value);
			style.set(this.addButton,"visibility",value?"hidden":"visible");
			style.set(this.removeButton,"visibility",value?"hidden":"visible");
		}else{
			this.inherited(arguments);
		}
	}
 	,reset1:function(name,value){
		if(name == "value"){
//			console.info(this.name,this.htmlName,"@@@MultiSelectEditorX######value:",value);
			this.valueOptions.clearOptions();
			this.valueOptions.setValues(value,this.valueDelimeter);
			var option = this.valueOptions.getOptions()[0];			
			this.containedEditor.stringToValue(option?option.value:"");			
		}else if(name == "disabled" || name == "readOnly"){
			this.valueOptions.set(name,value);
			style.set(this.addButton,"visibility",value?"hidden":"visible");
			style.set(this.removeButton,"visibility",value?"hidden":"visible");
		}
		else{
			this.inherited(arguments);
		}
	}
//	,isValid:function(){
//		return true;
//	}
[/@]
